<template>
  <div class="batch-actions-container">
    <el-card class="batch-card" shadow="hover">
      <div class="card-header">
        <i class="el-icon-s-operation"></i>
        <span>批量操作</span>
      </div>
      
      <div class="actions-content">
        <el-form :inline="true">
          <el-form-item>
            <el-button type="primary" @click="handleResetProxy" :loading="loading">
              <i class="el-icon-refresh"></i> 批量重置代理
            </el-button>
          </el-form-item>
          
          <el-form-item>
            <el-button type="success" @click="handleExport" :loading="loading">
              <i class="el-icon-download"></i> 批量导出数据
            </el-button>
          </el-form-item>
          
          <el-form-item>
            <el-button @click="handleSelectAll">
              <i class="el-icon-finished"></i> {{ isAllSelected ? '取消全选' : '全选当前页' }}
            </el-button>
          </el-form-item>
        </el-form>
        
        <div class="selection-info" v-if="selectedOrders.length > 0">
          <el-tag type="info">
            已选择 {{ selectedOrders.length }} 个订单
            <el-button type="text" size="mini" @click="clearSelection">
              <i class="el-icon-close"></i>
            </el-button>
          </el-tag>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'OrderBatchActions',
  props: {
    selectedOrders: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    isAllSelected: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    handleResetProxy() {
      if (this.selectedOrders.length === 0) {
        this.$message.warning('请先选择订单')
        return
      }
      
      this.$emit('batch-action', {
        action: 'reset',
        orderIds: this.selectedOrders.map(order => order.id)
      })
    },
    
    handleExport() {
      if (this.selectedOrders.length === 0) {
        this.$message.warning('请先选择订单')
        return
      }
      
      this.$emit('batch-action', {
        action: 'export',
        orderIds: this.selectedOrders.map(order => order.id)
      })
    },
    handleSelectAll() {
      this.$emit('toggle-select-all')
    },
    clearSelection() {
      this.$emit('clear-selection')
    }
  }
}
</script>

<style scoped>
.batch-actions-container {
  margin-bottom: 20px;
}

.batch-card {
  background-color: #f8f9fa;
  border-radius: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #409EFF;
}

.card-header i {
  margin-right: 8px;
}

.actions-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.selection-info {
  margin-top: 10px;
}

.el-tag {
  display: flex;
  align-items: center;
}

.el-tag .el-button {
  margin-left: 8px;
}
</style>
